<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"/>
    <style>
        body {
            background-color: #ffe4e6;
            font-family: 'Arial', sans-serif;
        }
        h3 {
            color: #ff6b81;
            font-weight: bold;
        }
        .form-group label {
            color: #ff6b81;
        }
        .form-control {
            border: 1px solid #ffc2c4;
            border-radius: 5px;
        }
        .form-control:focus {
            box-shadow: 0 0 5px #ff8fa3;
            border-color: #ff8fa3;
        }
        button {
            background-color: #ff6b81;
            color: white;
            border: none;
            border-radius: 5px;
        }
        button:hover {
            background-color: #ff8fa3;
        }
        .btn-default {
            width: 100px;
            margin: 5px;
        }
        img {
            border: 1px solid #ffc2c4;
            border-radius: 5px;
        }
        .login-container {
            width: 400px;
            padding: 20px;
            margin: 50px auto;
            background-color: #fffafa;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        ul li {
            color: #ff6b81;
        }
    </style>
    <script src="../../static/js/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var oInput = $("#loginname");
            oInput.focus();
        });
        function check() {
            var loginname = $('#loginname').val();
            if (loginname === "") {
                alert("登录名必填");
                $("#loginname").focus();
                return;
            }
            var loginpass = $('#loginpass').val();
            if (loginpass === "") {
                alert("密码必填");
                $("#loginpass").focus();
                return;
            }

            var vericode = $('#vericode').val();
            if (vericode === "") {
                alert("校验码必填");
                $("#vericode").focus();
                return;
            }
        }
        function reg1() {
            var origin = window.location.origin + "/register";
            window.location.href = origin;
        }
    </script>
</head>
<body>
    <div class="login-container">
        {% if messages %}
            <div>
                <ul>
                    {% for m in messages %}
                    <li>{{ m }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        <h3 style="text-align:center">登录</h3>
        <form id="lg" method="post" class="form-horizontal">
            {% csrf_token %}
            <div class="form-group">
                <label for="loginname" class="col-md-3 control-label">登录名</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" id="loginname" name="loginname"/>
                </div>
            </div>
            <div class="form-group">
                <label for="loginpass" class='col-md-3 control-label'>密码</label>
                <div class="col-md-9">
                    <input type="text" name="loginpass" id="loginpass" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="vericode" class="col-md-3 control-label">校验码</label>
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-9">
                            <input type="text" name="vericode" style="width:180px" id="vericode" class="form-control"/>
                        </div>
                        <div class="col-md-3">
                            <img src="{% url 'getvericodeimg' %}" style="height:30px;margin-left:-60px"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2">
                    <button class="btn btn-default" type="submit" onclick="check()">登录</button>
                    <button class="btn btn-default" type="button" id="reg" onclick="reg1()">注册</button>
                </div>
            </div>
        </form>
    </div>
</body>
